<template>
  <view class="app">
    <view class="main-box">
      <view class="form-box">
        <view class="form-item">
          <text class="item-title">旧的密码</text>
          <input type="password" v-model="form.old_password" placeholder="请输入旧的密码" />
        </view>
        <view class="form-item">
          <text class="item-title">新的密码</text>
          <input :password="!showPwd" v-model="form.new_password" placeholder="请输入6位以上新的密码" />
          <u-icon
            name="show-eye"
            custom-prefix="mt-icon"
            size="22"
            v-if="showPwd"
            color="#979797"
            @click="showPwd = !showPwd"
          ></u-icon>
          <u-icon
            name="close-eye"
            custom-prefix="mt-icon"
            size="24"
            v-else
            color="#979797"
            @click="showPwd = !showPwd"
          ></u-icon>
        </view>
        <view class="form-item">
          <text class="item-title">重复密码</text>
          <input :password="!showRePwd" v-model="form.repassword" placeholder="请重复输入新的密码" />
          <u-icon
            name="show-eye"
            custom-prefix="mt-icon"
            size="22"
            v-if="showRePwd"
            color="#979797"
            @click="showRePwd = !showRePwd"
          ></u-icon>
          <u-icon
            name="close-eye"
            custom-prefix="mt-icon"
            size="24"
            v-else
            color="#979797"
            @click="showRePwd = !showRePwd"
          ></u-icon>
        </view>
      </view>
    </view>

    <view class="footer">
      <view class="submit-btn" @click="save()">
        <text class="ml-10rpx">提 交</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { msg } from '@/utils/msg';
  import { resetPassword } from '@/api/fans';
  import { useFansStore } from '@/store/fans';
  import { report } from '@/utils/exception';

  const fansStore = useFansStore();
  const showPwd = ref<boolean>(false);
  const showRePwd = ref<boolean>(false);
  const form = ref({
    old_password: '',
    new_password: '',
    repassword: '',
  });

  const verifyPassword = () => {
    if (form.value.new_password.length < 6) {
      msg.error('请输入6位以上密码');
      return false;
    }
    return true;
  };

  const verifyRepassword = () => {
    if (form.value.new_password != form.value.repassword) {
      msg.error('两次密码输入不一致');
      return false;
    }
    return true;
  };

  const save = () => {
    if (!form.value.old_password) {
      return msg.error('请输入旧的密码');
    }

    if (!verifyPassword()) {
      return;
    }
    if (!verifyRepassword()) {
      return;
    }

    msg.loading();
    resetPassword(form.value)
      .then((res) => {
        fansStore.clearFansInfo();
        msg.success('密码修改成功，请重新登录！');
        setTimeout(() => {
          uni.navigateTo({ url: '/pages/auth/login?type=password' });
        }, 2000);
      })
      .catch((err) => {
        report(err);
      });
  };
</script>

<style lang="scss" scoped>
  $fontSize: 28rpx;

  .main-box {
    margin: 25rpx;

    .form-box {
      padding: 0 25rpx;
      background: white;
      border-radius: 20rpx;
      margin-bottom: 20rpx;

      .form-item {
        display: flex;
        align-items: center;
        padding: 30rpx 0;

        &:not(:last-child) {
          border-bottom: 1rpx solid $borderColor;
        }

        .item-title {
          font-size: $fontSize;
          font-weight: 600;
          width: 150rpx;
          flex: none;
        }

        input {
          font-size: $fontSize;
          margin-right: 10rpx;
          width: 100%;
        }
      }
    }
  }

  .footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    // position: fixed;
    // bottom: 0;
    width: 100%;
    height: 110rpx;
    // background: white;

    .submit-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 90%;
      font-size: 26rpx;
      font-weight: 600;
      color: white;
      margin: 0 auto;
      padding: 24rpx 0;
      border-radius: 50rpx;
      letter-spacing: 1rpx;
      background: linear-gradient(315deg, #429ff6, #394eea, #2664ef);
      box-shadow: rgba(29, 154, 244, 0.2) 0 5rpx 12rpx;
    }
  }
</style>
